<template>
	<view class="page_box">
		<u-navbar :is-back="true" title="我的会员" v-if="1" :border-bottom="false" title-color="#fff" :background="field"></u-navbar>
		<view class="content_box ">
			<!--  未支付-->

			<view class="bg-img flex flex-direction" v-if="user.is_expire">
				<view class="flex  padding-top-lg padding-lr ">
					<image :src="data.avatar" mode="aspectFill" class="user-avatar round w90 h90  "></image>
					<view class="flex flex-direction  ml48 ">
						<text class="f28 text-bold " style="color: #FFFFFF;">{{ data.nickname }}</text>
						<!-- <open-data class="user-name f28 text-bold  " type="userNickName" style="color: #FFFFFF;"></open-data> -->
						<text style="color: #9A9A9A;" class="f26 mt20">暂未开通会员服务</text>
					</view>
				</view>
				<scroll-view scroll-x="true" class="mt80 padding-left ">
					<view class="ww100 hh100 flex">
						<view
							class="w230 h280 r20 link flex flex-direction justify-center align-center mr30"
							v-for="(item, index) in user.member_list"
							:key="index"
							@click="click(index, item)"
							:class="index == c ? 'style2 animation-fade' : ''"
						>
							<text style="color: #CAB78C;" class="text-bold block w230 text-center tt1">{{ item.card_name }}</text>
							<text class="text-price f40 mt30 tt2" style="color: #D6C5A1;">{{ item.card_now_price }}</text>
							<text class="mt30 text-price tt3" style="text-decoration: line-through; color: #9B9B9B;">{{ item.card_old_price }}</text>
							<text class="f24 mt30 tt4" style="color: #806E47;">立省{{ item.card_old_price - item.card_now_price }}元</text>
						</view>
					</view>
				</scroll-view>
			</view>

			<!-- 已支付 -->

			<view class="bg-img flex flex-direction" v-else>
				<view class="flex  padding-top-lg padding-lr ">
					<image :src="data.avatar" mode="aspectFill" class="user-avatar round w90 h90  "></image>
					<view class="flex flex-direction  ml48 ">
						<text class="f28 text-bold " style="color: #FFFFFF;">{{ data.nickname }}</text>
						<text style="color: #806E47;" class="f24 mt20">会员到期时间:{{ user.member_expire_time }}</text>
					</view>
				</view>
				<scroll-view scroll-x="true" class="mt80 padding-left ">
					<view class="ww100 hh100 flex">
						<view
							class="w230 h280 r20 link flex flex-direction justify-center align-center mr30"
							v-for="(item, index) in user.member_list"
							:key="index"
							@click="click(index, item)"
							:class="index == c ? 'style2 animation-fade' : ''"
						>
							<text style="color: #CAB78C;" class="text-bold block w230 text-center tt1">{{ item.card_name }}</text>
							<text class="text-price f40 mt30 tt2" style="color: #D6C5A1;">{{ item.card_now_price }}</text>
							<text class="mt30 text-price tt3" style="text-decoration: line-through; color: #9B9B9B;">{{ item.card_old_price }}</text>
							<text class="f24 mt30 tt4" style="color: #806E47;">立省{{ item.card_old_price - item.card_now_price }}元</text>
						</view>
					</view>
				</scroll-view>
			</view>
			<!-- <view class="headimg bg-img h320 padding flex flex-direction justify-between " v-else>
				<view class="flex ">
					<view class="user-avatar round w82 h82 round bg-gray" style="overflow: hidden;">
						<open-data class="" type="userAvatarUrl" style=""></open-data>
					</view>
					<view class="flex flex-direction  ml28 ">
						<open-data
							class="user-name f28 text-bold"
							type="userNickName"
							style="color: #49401A;"
						></open-data>
						<text style="color: #806E47;" class="f24 mt20">会员到期时间:{{ user.member_expire_time }}</text>
					</view>
				</view>
				<view class="flex justify-center align-end">
					<text class="f46 text-bold">{{ user.card_name }}</text>
				</view>
				<view class="flex justify-between align-center">
					<text class="f22" style="color: #806E47;">NO.{{ user.member_sn }}</text>
					<view class="flex align-end">
						<text class="f22 margin-right-sm" style="color: #815508;">续费</text>
						<view class="flex  text-bold align-end" style="color: #815508;">
							<text class="f36 text-price " style="line-height: 26rpx;">{{ user.card_now_price }}</text>
							<text class="f24" style=" ">/{{ user.unit }}</text>
						</view>
					</view>
				</view>
			</view> -->
			<view class="flex justify-center mt58 mb49 ">
				<text class="f24 style1">
					开通即视为同意
					<text class="style">会员服务条款</text>
				</text>
			</view>
			<view class="" v-if="user.is_expire">
				<u-button :custom-style="customStyle" ripple  @click="renewNow">
					立即以
					<text class="text-black f30">{{ card_now_price }}</text>
					元开通
				</u-button>
			</view>
			<view class="padding-lr" v-else>
				<u-button :custom-style="customStyle" ripple  @click="renewNow">
					<text class="text-black f30">立即{{ card_now_price }}续费</text>
				</u-button>

				<!-- <button class="cu-btn btn round ww100 h100 f30 text-bold " @click="renewNow">
					<text class="text-black f30">立即{{ card_now_price }}续费</text>
				</button> -->
			</view>

			<view class="pt55 pb55 flex flex justify-center">
				<view class="w202 h36 bgimg bg-img flex justify-center"><text class="f32 style">尊享特权</text></view>
			</view>
			<view class="flex  flex-wrap padding-lr">
				<view class="ww50 flex justify-start mb64">
					<image src="../../static/image008.png" mode="" class="w82 h82 round"></image>
					<view class="flex flex-direction justify-between margin-left">
						<text class="f26 style">八折优惠</text>
						<text class="f24 style1">邀请亲友八折优惠</text>
					</view>
				</view>
				<view class="ww50 flex justify-start mb64">
					<image src="../../static/image004.png" mode="" class="w82 h82 round"></image>
					<view class="flex flex-direction justify-between margin-left">
						<text class="f26 style">主题活动</text>
						<text class="f24 style1">免费申请参加活动</text>
					</view>
				</view>
				<view class="ww50 flex justify-start mb64 mb64">
					<image src="../../static/image005.png" mode="" class="w82 h82 round"></image>
					<view class="flex flex-direction justify-between margin-left">
						<text class="f26 style">路演资格</text>
						<text class="f24 style1">免费申请路演资格</text>
					</view>
				</view>
				<view class="ww50 flex justify-start mb64">
					<image src="../../static/image006.png" mode="" class="w82 h82 round"></image>
					<view class="flex flex-direction justify-between margin-left">
						<text class="f26 style">茶饮免费</text>
						<text class="f24 style1">本人指定全年免费</text>
					</view>
				</view>

				<view class="ww50 flex justify-start mb64">
					<image src="../../static/image007.png" mode="" class="w82 h82 round"></image>
					<view class="flex flex-direction justify-between margin-left">
						<text class="f26 style">五折优惠</text>
						<text class="f24 style1">超出指定范围饮品</text>
					</view>
				</view>
				<view class="ww50 flex justify-start mb64">
					<image src="../../static/image002.png" mode="" class="w82 h82 round"></image>
					<view class="flex flex-direction justify-between margin-left">
						<text class="f26 style">会费全返</text>
						<text class="f24 style1">邀请三人</text>
					</view>
				</view>
				<view class="ww50 flex justify-start mb64">
					<image src="../../static/image001.png" mode="" class="w82 h82 round"></image>
					<view class="flex flex-direction justify-between margin-left">
						<text class="f26 style">专题培训课</text>
						<text class="f24 style1 wt">免费获24次(限100名）</text>
					</view>
				</view>
				<view class="ww50 flex justify-start mb64">
					<image src="../../static/image003.png" mode="" class="w82 h82 round"></image>
					<view class="flex flex-direction justify-between margin-left">
						<text class="f26 style">平台线上广告权</text>
						<text class="f24 style1 wt">免费一月(限100名）</text>
					</view>
				</view>
			</view>
		</view>

		<yy-login v-if="vuex_login"></yy-login>
		<yy-loading text="加载中.." mask="true" click="true" ref="loading"></yy-loading>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
var jweixin = require('jweixin-module');
export default {
	data() {
		return {
			field: {
				backgroundColor: '#1E1C2B',
			},
			card_now_price: '',
			user: {},
			c: 0,
			data: uni.getStorageSync('user'),
			customStyle: {
				width: '100%',
				height: '100rpx',
				fontSize: '30rpx',
				backGround: 'linearGradient(-90deg, #e9e0cc, #d9caaa)',
				color: '#594e20',
				borderRadius: '50rpx',
				fontWeight: '500',
			},
		};
	},
	onShow() {},
	onLoad(e) {
		this.personalCtr();
	},
	methods: {
		async click(e, item) {
			if (Number(item.card_now_price) < Number(this.user.card_now_price)) {
				this.$refs.uToast.show({ title: '已开通白银会员，暂不能开通', type: 'error' });
			} else {
				this.c = e;
				this.card_now_price = item.card_now_price;
			}
		},
		async personalCtr() {
			const res = await this.$u.post('UserInfo/memberCard', {}, {});
			this.user = res.data;

			res.data.member_list.forEach((e, i) => {
				if (e.card_name == res.data.card_name) {
					// console.log('i :>> ', i);
					this.c = i;
				}
			});
			this.card_now_price = res.data.member_list[this.c].card_now_price;
		},
		// 立即续费 - 生成订单
		async renewNow() {
			uni.showLoading({
				title: '加载中...',
				mask: false,
			});
			const res = await this.$u.post('Order/generateOrder', {});
			console.log('this.user :>> ', this.user);
			let obj = {
				order_sn: res.data.order_sn,
				invite_code: uni.getStorageSync('invite_code'),
				level_id: this.user.member_list[this.c].id,
			};
			console.log('obj :>> ', obj);
			const ress = await this.$u.post('Order/memberOrder', obj, {});
			if (ress.code) {
				let data = ress.data;

				// uni.requestPayment({
				// 	provider: 'wxpay',
				// 	timeStamp: data.timestamp,
				// 	nonceStr: data.nonceStr,
				// 	package: data.package,
				// 	signType: data.signType,
				// 	paySign: data.paySign,
				// 	success: res => {
				// 		console.log('success:' + JSON.stringify(res));
				// 		this.$refs.uToast.show({ title: '支付成功', type: 'success' });
				// 		setTimeout(() => {
				// 			this.l.on('/pages/index/index');
				// 		}, 500);
				// 	},
				// 	fail: err => {
				// 		console.log('fail:' + JSON.stringify(err));
				// 		this.$refs.uToast.show({ title: '支付失败', type: 'error' });
				// 	},
				// });
				this.toPay(1);
				var that = this;
				jweixin.ready(() => {
					// TODO

					jweixin.chooseWXPay({
						timestamp: data.timestamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
						nonceStr: data.nonceStr, // 支付签名随机串，不长于 32 位
						package: data.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
						signType: data.signType, // 微信支付V3的传入RSA,微信支付V2的传入格式与V2统一下单的签名格式保持一致
						paySign: data.paySign, // 支付签名
						success: function(res) {
							that.personalCtr();
							that.$refs.uToast.show({ title: '支付成功', type: 'success' });
							// setTimeout(() => {
							// 	that.l.on('/pages/index/index');
							// }, 500);
						},
					});
				});
			}
		},
	},
};
</script>

<style lang="scss" scoped>
.page_box {
	width: 100vw;
	height: 100vh;
	background-color: #1e1c2b;
	.bgimg {
		background-image: url(https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/20210616172219.png);
	}
	.style2 {
		background: linear-gradient(-55deg, #f1e0b1, #fffaf0) !important;
		border: 3rpx solid #c0ab7b;
		.tt1 {
			color: #2d260b !important;
		}
		.tt2 {
			color: #665925 !important;
		}
		.tt3 {
			color: #9c8c66 !important;
		}
		.tt4 {
			color: #86744d !important;
		}
	}
	.style {
		color: #d6c5a1;
	}
	.style1 {
		color: #878787;
	}

	.btn {
		background: linear-gradient(-90deg, #e9e0cc, #d9caaa);
		color: #594e20;
	}
}
.wt {
	white-space: nowrap;
}

.content_box {
	.headimg {
		background-image: url(https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/20210616163150.png);
	}
	.link {
		background: linear-gradient(0deg, #211e2f, #434059);
	}
}
</style>
